<template>
	<div class="page-container img-exif">
		<el-row>
			<el-col>
				<h1>图片Exif信息查看</h1>
				<el-form ref="form" :model="form">
					<el-form-item label="请选择要查看Exif信息的图片文件">
						<el-upload ref="upload" class="upload-demo" action="" :show-file-list="false"
							:on-change="handleChange">
							<el-button size="medium" type="primary">选择文件</el-button>
							<div slot="tip" class="el-upload__tip">只能上传 png、jpg、jpeg、gif、bmp、svg、webp、tif 格式的图片</div>
						</el-upload>
					</el-form-item>
				</el-form>

				<div v-if="exifData">
					<h2>Exif信息</h2>
					<table class="exif-table">
						<tbody>
							<tr v-for="(value, key) in exifData" :key="key">
								<td>{{ key }}</td>
								<td>{{ value }}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import Exif from 'exif-js';

	export default {
		data() {
			return {
				form: {
					imageFile: null
				},
				exifData: null
			};
		},
		methods: {
			handleChange(file) {
				const self = this;
				const reader = new FileReader();

				reader.onload = function() {
					const exifData = Exif.readFromBinaryFile(reader.result);
					self.exifData = exifData || {};
				};

				if (file && file.raw) {
					reader.readAsArrayBuffer(file.raw);
				}
			}
		},
	};
</script>

<style lang="scss">
	.img-exif {
		.exif-table {
			width: 90%;
			border-collapse: collapse;
			margin-top: 10px;
		}

		.exif-table td {
			border: 1px solid #ddd;
		}
	}
</style>
